const view_root =
{
    template: 
`<div>
    <ho-js-version></ho-js-version>
    <el-row>
        <el-button icon="el-icon-search" @click="btn_vueaxios_get_OnClick" v-loading="btn_vueaxios_get_IsBusy">vue.axios get</el-button>
    </el-row>    
    <el-row>
        <el-button icon="el-icon-search" @click="btn_vueaxios_post_OnClick" v-loading="btn_vueaxios_post_IsBusy">vue.axios post</el-button>
    </el-row>    
    <el-row>
        <el-button icon="el-icon-search" @click="btn_jsonp_OnClick">jsonp(只能解决跨域get的问题)</el-button>
    </el-row>
    <el-row>
        <el-button icon="el-icon-search" @click="btnTest_linqjs_OnClick"> linq.js </el-button>
    </el-row>
</div>`,
    data: function ()
    {
        return {
            btn_vueaxios_get_IsBusy: false,
            btn_vueaxios_post_IsBusy: false,
            arr: ["ab", "bc", "ca"],
        };
    },
    mounted: function() {
        
    },
    methods: {
        btn_vueaxios_get_OnClick: function (a) {
            console.log(`进入 btn_vueaxios_get_OnClick 方法`);
            if (this.btn_vueaxios_get_IsBusy == true) {
                this.$notify({
                    type: "warning",
                    title: "警告",
                    message: "正在执行，请稍候...",
                });
                return;
            }

            this.btn_vueaxios_get_IsBusy = true;
            axios.get(`https://httpbin.org/get`) // httpbin 是提供 api 测试的教育机构网站, 该网站后端开启了允许跨域, 所以直接 get 访问正常
                // .get(`/api/Test`) // 需要配合 proxy 使用 -- 例如 Live Server 需要在 .vscode 配置 settings.json 中设置 liveServer.settings.proxy
                // .get(`https://wis.qq.com/weather/common`) // 产生跨域报错
                // .get(`https://api.bilibili.com/x/space/acc/info?mid=34737320`)
                // .get(`/bilibili/x/space/acc/info?mid=34737320`)
                .then(res => {
                    console.log("axios result", res.data);
                    this.$notify({
                        type: `success`,
                        title: `axios result`,
                        message: `${JSON.stringify(res.data)}`,
                    });
                    this.btn_vueaxios_get_IsBusy = false;                    
                })
                .catch(error => {
                    // 处理错误的响应
                    console.error(`axios error`, error);
                    this.$notify({
                        type: `error`,
                        title: `axios 捕获异常`,
                        message: `${error}`,
                    });
                    this.btn_vueaxios_get_IsBusy = false;
                });
        },

        btn_vueaxios_post_OnClick: function (a) {
            console.log(`进入 btn_vueaxios_post_OnClick 方法`);
            if (this.btn_vueaxios_post_IsBusy == true) {
                this.$notify({
                    type: "warning",
                    title: "警告",
                    message: "正在执行，请稍候...",
                });
                return;
            }

            this.btn_vueaxios_post_IsBusy = true;
            axios.post(`https://httpbin.org/post?paramKey=kk&paramValue=vv`, { key: "vue", value: "HelloWorld" })
                // .get(`https://wis.qq.com/weather/common`) // 产生跨域报错
                .then(res => {
                    console.log("axios result", res.data);
                    this.$notify({
                        type: `success`,
                        title: `axios result`,
                        message: `${JSON.stringify(res.data)}`,
                    });
                    this.btn_vueaxios_post_IsBusy = false;
                })
                .catch(error => {
                    // 处理错误的响应
                    console.error(`axios error`, error);
                    this.$alert(error, "axios error", {
                        confirmButtonText: "确定",
                        callback: action => {
                            this.btn_vueaxios_post_IsBusy = false;
                        },
                    });
                });
        },

        btn_jsonp_OnClick: function () {
            let that = this;
            jsonp({
                url: "https://wis.qq.com/weather/common",
                param: {
                    source: "pc",
                    weather_type: "forecast_1h",
                    province: "广东省",
                    city: "广州市",
                },
                success: function (data) {
                    console.log(data);
                    // ！！！坑点 ！！！ 这里的 this 不是 vue 的
                    console.log("this(坑点)", this);
                    // 故无法使用 this. 访问 data 的数据
                    console.log("that", that);

                    let match = data.data.forecast_1h[0];
                    that.$notify({
                        type: "success",
                        title: "获取天气信息",
                        message: `温度：${match.degree}； 天气：${match.weather}；`,
                    });
                },
            });
        },

        btnTest_linqjs_OnClick: function () {
            console.log(this.arr);

            let query = Enumerable
                .from(this.arr)
                .where(i => {
                    return i.indexOf("a") >= 0;
                })
                .toArray();

            console.log(query);
        },
    }
};